import { Link } from 'react-router-dom'
import { ChevronRightIcon } from '@heroicons/react/20/solid'
import useGetSchoolLogo from '@hooks/useGetSchoolLogo'
import clsx from 'clsx'

const clients = [
  {
    id: 1,
    name: '校友会排行榜',
    color: 'from-cyan-50',
    rankList: [
      {
        name: '北京大学',
        tags: '北京.综合类',
        desc: '星级：8★',
        href: '#'
      },
      {
        name: '清华大学',
        tags: '北京.综合类',
        desc: '星级：8★',
        href: '#'
      },
      {
        name: '浙江大学',
        tags: '浙江.综合类',
        desc: '星级：8★',
        href: '#'
      },
    ]
  },
  {
    id: 2,
    name: '武书连排行榜',
    color: 'from-green-50',
    rankList: [
      {
        name: '清华大学',
        tags: '北京.综合类',
        desc: '分省排名：1',
        href: '#'
      },
      {
        name: '浙江大学',
        tags: '浙江.综合类',
        desc: '分省排名：1',
        href: '#'
      },
      {
        name: '北京大学',
        tags: '北京.综合类',
        desc: '分省排名：2',
        href: '#'
      },
    ]
  },
  {
    id: 3,
    name: '软科排行榜',
    color: 'from-indigo-50',
    rankList: [
      {
        name: '清华大学',
        tags: '北京.综合类',
        desc: '总分：1004.1',
        href: '#'
      },
      {
        name: '北京大学',
        tags: '北京.综合类',
        desc: '总分：910.5',
        href: '#'
      },
      {
        name: '浙江大学',
        tags: '浙江.综合类',
        desc: '总分：822.9',
        href: '#'
      },

    ]
  },
]


export function RankNav() {

  const renderRankList = (schools) => (
    schools.map((school, index) => (
      <Link to={school.href} key={school.name}>
        <li className="relative flex justify-between px-4 py-5 hover:scale-105 sm:px-6 whitespace-nowrap">
          <div className="flex gap-x-4" >
            {useGetSchoolLogo(school.name, index)}
            <div className="min-w-0 flex-auto">
              <p className="text-sm font-semibold leading-6 text-gray-900">
                {school.name}
              </p>
              <p className="mt-1 flex text-xs leading-5 text-gray-500">
                {school.tags}
              </p>
            </div>
          </div>
          <div className="hidden items-center gap-x-2 md:flex">
            <div className="hidden lg:flex lg:flex-col lg:items-end">
              <p className="text-sm leading-6 text-gray-900">{school.desc}</p>
            </div>
            <ChevronRightIcon className="h-5 w-5 flex-none text-gray-400" aria-hidden="true" />
          </div>
        </li>

      </Link>
    ))
  )

  return (
    <ul role="list"
      className="grid grid-cols-3 gap-x-2 gap-y-8 xl:gap-x-8"
    >
      {clients.map((client) => (
        <li key={client.id} className={clsx("overflow-hidden rounded-xl border border-gray-200 bg-gradient-to-b to-50% outline-none", `${client.color}`)}>
          <div className="flex items-center gap-x-4 border-b border-gray-900/5 p-6 ">
            <div className="text-xl font-medium leading-6 text-gray-900">{client.name}</div>
          </div>
          <div className="-my-3 divide-y divide-gray-100 px-2 py-4 text-sm leading-6">
            <ul>
              {renderRankList(client.rankList)}
            </ul>
          </div>
        </li>
      ))
      }
    </ul >
  )
}
